﻿<UserControl x:Class="ColorPicker.CtrlColorPicker"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="White" Height="314" Width="365">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Border BorderThickness="2" BorderBrush="White">
            <Grid x:Name="SubPalette">
                <Rectangle x:Name="primaryColor" Fill="Red"/>
                <Rectangle x:Name="white" Fill="White">
                    <Rectangle.OpacityMask>
                        <LinearGradientBrush EndPoint="0.994,0.163" StartPoint="0.031,0.011">
                            <GradientStop Color="Black" Offset="0.032"/>
                            <GradientStop Offset="1"/>
                        </LinearGradientBrush>
                    </Rectangle.OpacityMask>
                </Rectangle>
                <Rectangle x:Name="black" Fill="Black">
                    <Rectangle.OpacityMask>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Offset="0"/>
                            <GradientStop Color="Black" Offset="1"/>
                        </LinearGradientBrush>
                    </Rectangle.OpacityMask>
                </Rectangle>
                <Canvas>
                    <Grid x:Name="Picker" Background="Transparent" Height="10" Width="10" Canvas.Left="100" Canvas.Top="100" Cursor="Hand">
                        <Ellipse Stroke="White"/>
                        <Ellipse Stroke="Black" Margin="1"/>
                        <Ellipse Stroke="White" Margin="2"/>
                    </Grid>
                </Canvas>
            </Grid>
        </Border>
        <Grid Grid.Column="2" Margin="0,0,10,0">
            <Image x:Name="ColorBar" Height="306" Stretch="Fill" Width="25" Grid.Column="1" d:LayoutOverrides="GridBox" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" Cursor="Hand"/>
            <Canvas>
                <Grid x:Name="ColorPickerHandle" Height="9" Canvas.Top="0" Canvas.Left="-8">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="25"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Image x:Name="leftHandle" HorizontalAlignment="Left" Source="Assets/color_handle.png" Stretch="None"/>
                    <Image x:Name="rightHandle" HorizontalAlignment="Left" Source="Assets/color_handle.png" Stretch="None" Grid.Column="2" RenderTransformOrigin="0.5,0.5">
                        <Image.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="-1"/>
                                <SkewTransform AngleX="0" AngleY="0"/>
                                <RotateTransform Angle="0"/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Image.RenderTransform>
                    </Image>
                </Grid>
            </Canvas>
        </Grid>
    </Grid>
</UserControl>
